<template>
	<div class="container">
		<view class="set-bg">
			<view class="time-box flex">
				<text class="tip">选择日期</text>
				<view class="pick-time flex-align-center" @click="chooseTime('start')">
					<text class="iconfont icon-riqi"></text>
					<text class="time">{{ query.startDate }}</text>
				</view>
				<view class="pick-time flex-align-center" @click="chooseTime('end')">
					<text class="iconfont icon-riqi"></text>
					<text class="time">{{ query.endDate }}</text>
				</view>
			</view>
			<div class="l-box flex-center" v-if="query.walletType!=6">
				<view class="d-box flex-column" v-for="(item, i) in topData" :key="i">
					<text class="title">{{ item.title }}</text>
					<text class="num">{{
            item.valueType == "money"
              ? "￥" + toFixedNum(item.value)
              : item.value
          }}</text>
				</view>
			</div>
		</view>
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="index">
				<!-- <view class="month-total">
          <view class="month">{{ item.time }}<text class="dio">月</text></view>
          <view class="total flex-space-between">
            <text class=""
              >收入
              <text class="num">￥28838.00</text>
            </text>
            <text class=""
              >支出
              <text class="num">￥28838.00</text>
            </text>
          </view>
        </view> -->

				<view class="date" @click="toInfoHandle(item)">
					<view class="time">
						{{ item.addDate }}
					</view>
					<view class="data flex-column">
						<view class="tag-box flex-space-between">
							<text class="title">{{item.remark }}</text>

							<text class="num" v-if="query.walletType == 6" :class="{ green: item.operateType == 0 }">{{ item.operateType == 0 ? "" : "+"
				}}{{ toFixedNum(item.amount) }}</text>
							<text class="num" :class="{ green: item.changeType == 0 }" v-else>{{ item.changeType == 0 ? "" : "+"
				}}{{ toFixedNum(item.amount) }}</text>
						</view>
					</view>
					<view class="data" v-if="item.serialno">
						机具编码：{{item.serialno}}<span class="iconfont icon-niantie copy" @click.stop="$copy(item.serialno)"></span>
					</view>
					<view class="data" v-if="item.merchName">
						商户名称：{{item.merchName}}
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadMore"></uni-load-more>
		<u-picker mode="time" v-model="timePicker" :default-time="defaultTime" :params="params" title="选择年月"
			@confirm="pickerConfirmHandle" start-year="2021" @cancel="timePicker = false" confirm-color="#4888FB" />
	</div>
</template>

<script>
	import {
		formDateToString,
		getCurrentMonthFirst1,
		getNowMonthNoDate,
		getCurrentYearFirst,
	} from "_c/utils/date";

	import {
		walletChangeList,
		cashpoolChangList
	} from "_a/earnings/index";
	import loadMoreData from "@/mixins/loadmore";
	import mockjs from "mockjs";
	export default {
		mixins: [loadMoreData],
		data() {
			return {
				num: 1990,
				topData: [{
						title: "可用余额",
						value: 0,
						valueType: "money"
					},
					{
						title: "在途余额",
						value: 0,
						valueType: "money"
					},
					{
						title: "冻结余额",
						value: 0,
						valueType: "money"
					},
				],
				query: {
					startDate: getCurrentYearFirst(new Date()),
					endDate: formDateToString(new Date()),
					walletType: 0,
					subWalletType: 0,
					agentType: 2
				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false,
				},
				timePicker: false,
				filterPopup: false,
				showPicker: false,
				brandList: [{
						brandName: "独守空房",
						brandCode: "dsaf",
					},
					{
						brandName: "独守空房",
						brandCode: "dsaf",
					},
					{
						brandName: "独守空房",
						brandCode: "dsaf",
					},
				],
				list: [],
				echartNavType: [{
						name: "日",
						value: "0"
					},
					{
						name: "月",
						value: "1"
					},
				],
				navIndex1: 0,
				chooseType: "start",
				defaultTime: '',
			};
		},
		onLoad(o) {
			this.query.walletType = o.type;
			this.getTotal();
			this.getList();
		},
		filters: {
			timeForm(v) {
				return v.slice(0, 10);
			},
		},
		methods: {
			chooseTime(type) {
				this.timePicker = true;
				this.chooseType = type;
				if (type == 'start') {
					this.defaultTime = this.query.startDate
				} else {
					this.defaultTime = this.query.entDate
				}
			},
			getTotal() {
				let list = this.$store.getters.userInfo.wallet;
				let item = list.find((item) => {
					return item.walletType == this.query.walletType;
				});
				// console.log(item);
				if (item) {
					this.topData[0].value = item.usableAmount;
					this.topData[1].value = item.transitAmount;
					this.topData[2].value = item.freezeAmount;
				}
			},
			changeNav(i) {
				switch (i) {
					case 1:
						this.navIndex1 = i;
						break;
					case 2:
						this.navIndex2 = i;
						break;
					default:
						break;
				}
			},
			onBrandConfirm(e) {
				console.log(e);
				this.query.brandCode = this.brandList[e[0]].brandCode;
				this.query.brandName = this.brandList[e[0]].brandName;
			},
			init() {
				this.$nextTick(() => {
					this.list = [];
					// this.getTotal();
					// this.refreshLoad();
				});
			},
			resetHandle() {
				this.typename = "全部";
				this.query = {
					pageNum: 1,
					pageSize: 20,
					agentType: 2
				};
			},
			queryHandle() {
				this.$forceUpdate();
				this.init();
				this.filterPopup = false;
				this.getList();
			},
			pickerConfirmHandle(item) {
				// console.log(item);
				if (this.chooseType == "start") {
					this.query.startDate = `${item.year}-${item.month}-${item.day}`;
				} else {
					this.query.endDate = `${item.year}-${item.month}-${item.day}`;
				}
				this.timePicker = false;
				this.queryHandle();

			},
			changeEChartType() {
				this.filterPopup = true;
			},
			getList() {
				const page = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
				}
				// let params = {
				// 	pageNum: this.pageNum,
				// 	pageSize: this.pageSize,
				// 	...this.query,
				// };
				if (this.query.walletType == 6) {
					const params = {
						...page,
						startDate: this.query.startDate,
						endDate: this.query.endDate
					}
					cashpoolChangList(params).then((res) => {
						var list = res.rows;
						this.loadMoreStatusDeal(list);
						if (list.length > 0) {
							this.list = this.list.concat(list);
						}
					});
				} else {
					walletChangeList({
						...page,
						...this.query
					}).then((res) => {
						var list = res.rows;
						this.loadMoreStatusDeal(list);
						if (list.length > 0) {
							this.list = this.list.concat(list);
						}
					});
				}

			},
			reachBottomCallBack() {
				this.getList();
			},
			toInfoHandle(item){
				this.$storage.setStore("earningsInfo", item);
				// let option = this.$storage.getStore('earningsInfo') || {};
				this.$nav.push({
					path: '/pages/earnings/earningsInfo',
				});
			}
		},
	};
</script>
<style scoped lang='scss'>
	.container {
		padding: R(0) 0 R(25);
	}

	.set-bg {
		/* background: linear-gradient(to bottom, #2689ec 0%, #f1f6f8 100%); */
		background: $page-linear-bg;
	}

	.time-box {
		padding: R(30) R(23) R(0);
		color: #fff;
		align-items: center;

		.tip {
			font-size: R(28);
			font-weight: 400;
		}

		.pick-time {
			width: 39%;
			height: R(60);
			background: #ffffff;
			border-radius: R(3);
			color: #000;
			padding: 0 R(16);
			margin-left: R(18);

			.time {
				font-size: R(26);
				margin-left: R(20);
			}
		}
	}

	.l-box {
		margin-bottom: R(26);
		justify-content: space-between;
		background: rgba(255, 255, 255, 0.94);
		margin: R(23) R(25) R(20);
		border-radius: R(10);
		height: R(165);
		color: #808080;
		text-align: center;
		position: relative;
		z-index: 1;

		.d-box {
			width: 31%;
			text-align: center;
		}

		.num {
			font-size: R(34px);
			font-weight: bold;
			color: #1a1a1a;
		}

		.title {
			font-size: R(26px);
			font-family: Source Han Sans CN;
			font-weight: 400;
			margin-top: auto;
			white-space: nowrap;
			margin-bottom: R(30);
		}

		.sub {
			@extend .title;
			height: R(30);
		}

		.line {
			position: relative;
		}

		.line::after {
			content: "";
			position: absolute;
			background: #eee;
			width: 1px;
			height: R(94);
			right: 0;
			top: R(8);
		}
	}

	.list {
		border-radius: R(10);
		padding: R(20px) 0;
		margin: R(0) R(25) R(20);

		.item {
			// margin: R(0) R(0) R(28);
			overflow: hidden;
			background: #fff;

			.month-total {
				padding: R(30) R(40);
				background: url(../../common/images/earnings/item-bg.png);
				background-size: 100% 100%;

				.month {
					font-size: R(48);
					line-height: 1;
					font-weight: bold;
					color: #1a1a1a;
					margin-bottom: R(30);

					.dio {
						font-size: R(28);
						font-weight: 500;
					}
				}

				.total {
					.num {
						font-size: R(36);
						font-weight: bold;
					}
				}
			}

			.date {
				padding: R(20) R(20) R(20);
				border-bottom: 1px solid #eee;

				.time {
					width: R(300);
					height: R(44);
					line-height: R(44);
					margin-bottom: R(10);
					text-align: center;
					background: #f1f6f8;
					border-radius: R(22);
					font-size: R(26);
					font-weight: 400;
					color: #666666;
				}

				.data {
					.tag-box {
						text-align: center;
						padding: R(0) 0;

						.num {
							font-size: R(36);
							margin-bottom: R(10);
							color: red;
						}

						.title {
							font-size: R(28);
							color: #666666;
						}

						.green {
							color: green;
						}
					}
				}

				.name {
					font-size: R(26);
					margin-bottom: R(20);

					.me {
						position: relative;
						color: #f3e8a1;
						font-size: R(46);

						.font {
							position: absolute;
							left: R(20);
							top: R(10);
							font-size: R(20);
							color: #000;
						}
					}
				}

				.title {
					font-size: R(30);
					font-weight: bold;
					color: #1a1a1a;
				}
			}
		}
	}
</style>